<template>
 <div>
        <schart class="canvas" :canvasId="canvas1.canvasId"
			:type="canvas1.type"
			:width="canvas1.width"
			:height="canvas1.height"
			:data="canvas1.data"
			:options="canvas1.options"
		></schart>
   <schart class="canvas" :canvasId="canvas2.canvasId"
			:type="canvas2.type"
			:width="canvas2.width"
			:height="canvas2.height"
			:data="canvas2.data"
			:options="canvas2.options"
		></schart>
        <schart class="canvas" :canvasId="canvas3.canvasId"
			:type="canvas3.type"
			:width="canvas3.width"
			:height="canvas3.height"
			:data="canvas3.data"
			:options="canvas3.options"
		></schart>
        <schart class="canvas" :canvasId="canvas4.canvasId"
			:type="canvas4.type"
			:width="canvas4.width"
			:height="canvas4.height"
			:data="canvas4.data"
			:options="canvas4.options"
		></schart>
        </div>
</template>
<script>
import Schart from 'vue-schart';
export default {
	data() {
		return {
            canvas1:{
                canvasId: 'myCanvas1',
                // type: 'bar',
                // type: 'line',
                // type: 'Pie',
                type: 'bar',
                width: 500,
                height: 400,
                data: [
                    {name: '谷歌', value: 1342},
                    {name: 'IE', value: 2123},
                    {name: '微信', value: 1654},
                    {name: '安卓', value: 1795},
                ],
                options: {
                    title: '浏览器分布'
                }
            },
            canvas2:{
                canvasId: 'myCanvas2',
                // type: 'bar',
                // type: 'line',
                // type: 'Pie',
                type: 'line',
                width: 500,
                height: 400,
                data: [
                    {name: '谷歌', value: 1342},
                    {name: 'IE', value: 2123},
                    {name: '微信', value: 1654},
                    {name: '安卓', value: 1795},
                ],
                options: {
                    title: '浏览器分布'
                }
            },
            canvas3:{
                canvasId: 'myCanvas3',
                // type: 'bar',
                // type: 'line',
                // type: 'Pie',
                type: 'pie',
                width: 500,
                height: 400,
                data: [
                    {name: '谷歌', value: 1342},
                    {name: 'IE', value: 2123},
                    {name: '微信', value: 1654},
                    {name: '安卓', value: 1795},
                ],
                options: {
                    title: '浏览器分布'
                }
            },
            canvas4:{
                canvasId: 'myCanvas4',
                // type: 'bar',
                // type: 'line',
                // type: 'Pie',
                type: 'ring',
                width: 500,
                height: 400,
                data: [
                    {name: '谷歌', value: 1342},
                    {name: 'IE', value: 2123},
                    {name: '微信', value: 1654},
                    {name: '安卓', value: 1795},
                ],
                options: {
                    title: '浏览器分布'
                }
            },
			
		}
	},
    components:{
		Schart
	}
}
</script>
<style scoped>
.canvas{
    display: inline-block;
}
</style>